/*实力评级----player detail*/

EMui.vmRatingPlayerDetail=(function(){
    var id=EMui.utils.getUrlParam("id");

    //折线图表参数配置=========================
    var lineOpt ={
        tooltip : {show:false},
        grid: {left: '12%',top:'10%', right: '6%', bottom: '14%', containLabel: false},
        xAxis : [
            {
                type : 'category',
                axisLine: { lineStyle: { color: '#1b4361', width: 2 },onZero: false },
                splitLine: {
                    lineStyle: { color: '#225981' },
                    interval:function(index,value){
                        if(index<8){
                            return true;
                        }else{
                            return false;
                        }
                    }
                },
                axisTick: { show: false },
                axisLabel : {
                    formatter:  function(value,idx){return '0'+(++idx)},
                    textStyle: { color: '#ffffff' }
                },
                data:function () {
                    var list = [];
                    for (var i = 1; i <= 8; i++) {
                        var str = '0'+i;
                        list.push(str);
                    }
                    return list;
                }()
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine : {lineStyle: { color: '#1b4361', width: 2 }},
                splitLine: {  lineStyle: { color: '#02807c', type: 'dotted' }}, //dotted,dashed
                axisTick: { show: false },
                axisLabel: {
                    formatter: function (value) {
                        if (value > 10000) {
                            return parseInt(value / 1000) + " k ";
                        } else {
                            return value;
                        }

                    },
                    textStyle: { color: '#ffffff' }
                },

                scale:true

            }
        ],
        series : [
            {
                type:'line',
                smooth:true,
                itemStyle: {  normal: {color: '#ffffff',borderWidth:4}},
                lineStyle : {  normal: { color: '#7ed2f5'}},
                data:[]
            }
        ]
    };

    //get data
    function getData(li) {
        var data = $.trim(li.attr("data-integral")), numArr = [];
        if (data) {
            data = data.split(",");
            $.each(data, function (index, item) {
                numArr.push(item * 1);
            });
        }
        return numArr;
    }

    //show chart
     function showChat(chat,curLi,opts) {
         opts.series[0].data = getData(curLi);
         chat.setOption(opts);
    }


    //雷达图
    var radarDefaultOpts= {
        backgroundColor: '#00283a',
        tooltip:{
                show:false
        },
        radar: {
            name: {
                formatter:'{value}',
                    textStyle: {
                    color:'rgba(255, 255, 255, 0.5)',fontSize:'14'
                }
            },

            //大小
            radius: '70%',
            splitNumber: 10,
                //分隔区域
            splitArea:{
                show:true,
                    areaStyle:{   color: ['rgba(250,250,250,0)','rgba(200,200,200,0)']}
            },

            //分隔线
            splitLine:{
                lineStyle: {
                    color: '#46c1e9'
                }
            },

            //坐标线
            axisLine:{
                lineStyle:{color:"#45baeb"}
            },

            //此数据由服务端提供
            indicator: [
                { name: '一血', max: 100},
                { name: '一龙', max: 100},
                { name: '一塔', max: 100},
                { name: '首大龙', max: 100},
                { name: '一先锋', max: 100}
            ]
        },
        series: [
            {
                type: 'radar',
                symbolSize:5,
                itemStyle: {  normal: {color: 'rgba(255,255,255,0.8)'}},
                areaStyle: {normal: {color: 'rgba(70,193,233,0.5)'}},
                data : []
            }
        ]
    };






    var view= new LeafView({
        id:"#ratingPlayerDetail",
        state:{isAddSlider:false,isShow:true},
        param:{
            url:EMui.urls.domain+EMui.urls.ratingPlayerDetail+"/"+id,
            data:{id:0}
        },
        vm:new Vue({
            el:$("#ratingPlayerDetail")[0] ,
            data:{list:[],detail:null},
            watch:{
                'detail':function (val,oldVal) {
                    var me=view;

                    //雷达图
                    var playerRadar = echarts.init(document.getElementById('radarBox'));
                    var curOpts = $.extend(true,{}, radarDefaultOpts);

                    //添加数据--------
                    curOpts.series[0].data[0]= {
                        value : [43, 100, 28, 35, 50],
                        name: 'LongZhu Gaming'
                    };
                    playerRadar.setOption(curOpts);



                    //折线图表功能----------------
                    if(val.PriceList && val.PriceList.length && val.PriceList.length>0){

                        var chartZone=$("#chartZonePlayer");
                        var tab=$(".p-tab-h",chartZone);
                        var lis=$("li",tab);

                        //first load
                        var curLi =lis.filter(".cur");
                        var pChart = echarts.init(document.getElementById('lineBoxPlayer')),
                            pOpts = $.extend(true, {}, lineOpt);
                        showChat(pChart, curLi, pOpts);


                        //tabs switch
                        lis.on("changetab", function () {
                            curLi = $(this);
                            showChat(pChart, curLi, pOpts);
                        });
                    }

                }
            }
        }),
        isLoadMore:false
    });

    return{
        init:function(){
            view.param.data.id=id;
            view.fillData();
        },
        reloadData:function(){
            view.vm.list=[];
            view.fillData();
        }
    }
})();



